<template>
    <div class="link-vue">
        <div v-show="urlshow" class="link-vue-box">
            <div class="link-logo">小竹财税</div>
            <div class="link-box">
                <div class="link-box-text1">即将离开小竹财税</div>
                <div class="link-box-text2">
                    您即将离开小竹财税，请注意您的帐号和财产安全。
                </div>
                <div class="link-box-url">
                    {{ url }}
                </div>
                <div class="go-link" @click="golink">继续访问</div>
            </div>
        </div>
    </div>
</template>

<script>
function isTargetDomain(url) {
    const parsedUrl = new URL(url);
    return parsedUrl.hostname === "www.xzcs2022.com";
}
export default {
    head() {
        return {
            title: "小竹问答-【小竹财税平台】",
            meta: [
                {
                    hid: "keywords",
                    name: "keywords",
                    content: "小竹财税",
                },
            ],
        };
    },
    data() {
        return {
            url: "",
            urlshow: false,
        };
    },
    mounted() {
        console.log(this.$route);
        this.url = this.$route.query.url;
        if (isTargetDomain(this.url)) {
            this.golink()
        } else {
            this.urlshow = true;
        }
    },
    computed: {},
    methods: {
        golink() {
            window.location.href = this.url;
        },
    },
};
</script>

<style lang="scss" scoped>
* {
    box-sizing: border-box;
}
.link-vue {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.link-vue-box {
    width: 694px;
    .link-logo {
        font-weight: 500;
        font-size: 32px;
        color: #3d3d3d;
        margin-bottom: 15px;
        padding-left: 38px;
    }
    .link-box {
        background-color: #ffffff;
        padding: 29px 38px 19px;
        .link-box-text1 {
            font-weight: 500;
            font-size: 22px;
            color: #3d3d3d;
        }
        .link-box-text2 {
            font-weight: 400;
            font-size: 16px;
            color: #3d3d3d;
            margin: 20px 0 16px;
        }
        .link-box-url {
            font-weight: 400;
            font-size: 14px;
            color: #574343;
            padding-bottom: 15px;
            border-bottom: 1px solid #ebebeb;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .go-link {
            width: 125px;
            height: 43px;
            line-height: 43px;
            background: #1c87f3;
            border-radius: 2px;
            text-align: center;
            font-weight: 500;
            font-size: 20px;
            color: #ffffff;
            cursor: pointer;
            user-select: none;
            margin-left: calc(100% - 125px);
            margin-top: 29px;
            &:hover {
                opacity: 0.9;
            }
            &:active {
                opacity: 0.8;
            }
        }
    }
}
</style>
